<template>
	<view>
		<view class="header-box">
			<topTabBar :hiddenTitle="true"></topTabBar>
			<view class="topLogo">
				<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- input输入框 -->
		<view class="" style="margin-top: -500rpx;">
			<view class="input-group">
				<view class="input-row">
					<image class="img" src="/static/login/phone.png" mode="widthFix"></image>
					<input class="input" maxlength="11" type="number" v-model="mobile" placeholder="请输入手机号"
						placeholder-style="color:#BFBFBF;font-size:30rpx;" />
				</view>
				<view class="input-row border-bottom">
					<image class="img" src="/static/login/pw.png" mode="widthFix"></image>
					<input class="input code-input" type="number" maxlength="6" placeholder="请输入验证码" v-model="captcha"
						placeholder-style="color:#BFBFBF;font-size:30rpx;" />
					<button class="code-btn cu-btn bg-white get-button" @tap="sendCode">{{ CodeText }}</button>
				</view>
			</view>
			<!-- 登陆注册按钮 -->
			<view class="login-btn">
				<view class="subtn"><button type="primary" @click="loginClick">登录</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import topTabBar from '@/components/topTabBar.vue';
	import {
		mapActions
	} from "vuex";
	const pushServices = uniCloud.importObject('push-services')
	export default {
		components: {
			topTabBar
		},
		data() {
			return {
				CodeText: '获取验证码',
				CodeNumDown: 60,
				mobile: '',
				captcha: '', //验证码
			};
		},
		methods: {
			// 发送验证码
			sendCode() {
				let ph = /^[1][0-9]{10}$/;
				if (!ph.test(this.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return
				}
				this.downTime(this.CodeNumDown);
				let that = this;
				that.$http('user.smsSend', {
					mobile: this.mobile,
					event: 'mobilelogin'
				}, '获取中...').then(res => {
					this.downTime(this.CodeNumDown)
					if (res.code === 1) {
						this.downTime(this.CodeNumDown);
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				});
			},
			downTime(num) {
				if (num === 0) {
					this.CodeText = '获取验证码';
					num = 60;
					this.CodeNumDown = num;
					return;
				} else {
					num--;
					this.CodeText = num + 's后发送';
					this.CodeNumDown = num;
				}
				var _this = this;
				setTimeout(function() {
					_this.downTime(num);
				}, 1000);
			},
			// 验证码登录
			loginClick() {
				let ph = /^[1][0-9]{10}$/;
				// let psw = /^(\w){8,8}$/;
				if (!ph.test(this.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return
				}
				if (!this.captcha) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return
				}
				let that = this;
				that.$http('user.usermobilelogin', {
					mobile: that.mobile,
					captcha: that.captcha
				}, '登录中...').then(res => {
					if (res.code === 1) {
						uni.setStorageSync('token', res.data.token);
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				});
			},
			navigator(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.header-box {
		width: 100%;
		height: 950rpx;
		background-image: url('');
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;

		.topLogo {
			width: 100%;
			text-align: center;
			padding-top: 120rpx;

			.logo {
				width: 138rpx;
				height: 138rpx;
				margin: 0 auto;
				border-radius: 20px;
			}
		}
	}

	.form-group {
		padding: 0 74rpx;
		margin-top: 140rpx;

		.from-cell {
			width: 100%;
		}
	}

	/*input输入框*/
	.input-group {
		padding: 32upx 75upx 20upx;

		.input-row {
			line-height: 105upx;
			height: 105upx;
			display: flex;
			position: relative;
			align-items: center;
			border-bottom: 2upx solid #EEEEEE;
			transition: all 0.5s ease-in-out;

			.close-img {
				width: 32rpx;
				height: 32rpx;
			}

			.img {
				width: 34rpx;
				height: 34rpx;
				margin-right: 30upx;
			}

			.input {
				width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				color: #BFBFBF;
				font-family: PingFangSC-Semibold, PingFang SC;
			}

			.code-input {
				width: 400upx;
			}

			.code-btn {
				font-size: 24upx;
				display: block;
				line-height: 64upx;
				position: absolute;
				right: 0;
				top: calc(50% - 32upx);
				color: #287E34;
				background-color: #fff;
			}
		}


		.invalid-feedback {
			font-size: 24upx;
			color: #c7000a;
			padding-top: 5px;
			padding-left: 20upx;
		}
	}

	/*登录按钮*/
	.login-btn {
		padding: 30upx 50upx;

		.subtn {
			margin-bottom: 30upx;

			button {
				height: 98px;
				background: linear-gradient(93deg, #6FAD19 0%, #287E34 100%);
				// box-shadow: 0px 2px 4px 0px rgba(9, 113, 242, 0.2);
				width: 100%;
				height: 98rpx;
				text-align: center;
				line-height: 90rpx;
				border-radius: 49rpx;
				font-size: 32rpx;
				font-weight: 500;
				border: none;
				color: #fff;
			}

			button::after {
				border: none;
			}
		}
	}
</style>